<!-- 购物车 -->
<template>
  <view class="page_box">
    <!-- 总数 -->
    <view class="head_box" v-show="!isEmpty">
      <view class="tool-box u-flex u-row-between">
        <u-checkbox @change="onAllSel" activeColor="#FC5351" shape="circle" :value="allSelected" :size="40" >全选 <text
            class="chooseed" v-if="totalCount.totalNum>0">（已选{{ totalCount.totalNum }}件商品）</text>
        </u-checkbox>
        <!--        <view class="count-box">-->
        <!--					共-->
        <!--					<text class="all-num">{{ cartList.length }}</text>-->
        <!--					件商品-->
        <!--				</view>-->
        <view class="right-del" @tap="isshowTool=!isshowTool">
          <text>{{ isshowTool ? '完成' : '管理' }}</text>
        </view>
<!--        				<button class="u-reset-button set-btn" @tap="isTool = !isTool">{{ isTool ? '完成' : '编辑' }}</button>-->
      </view>
    </view>

    <view class="content_box">
      <!-- 列表 -->
      <u-checkbox-group @change="checkboxGroupChange" activeColor="#FC5351" :size="40" v-if="!isEmpty">
        <view class="collect-list u-flex u-row-left u-col-center" v-for="(g, index) in cartList" :key="index">
          <u-checkbox class="u-p-l-10" :cartid="g.id" :name="g.goods_id" shape="circle" v-model="g.is_select"
                      @change="choosegoods()">
            <view style="height: 160rpx"></view>
          </u-checkbox>
          <view class="goods-wrap">
            <view class="lose-box"
                  v-if="g.cart_type === 'invalid' || (g.cart_type === 'activity' && !isActivityPay)">
              <text v-if="g.cart_type === 'invalid'" class="iconfont icon-yishixiao"></text>
              <view v-if="g.cart_type === 'activity' && !isActivityPay"
                    class="invalid-tips u-flex u-row-center u-col-center">活动商品,仅支持单独购买</view>
            </view>
            <shopro-mini-card :image="g.goods.image" :title="g.goods.title" :goodsid="g.goods.id"
                              @clicks.stop="click">
              <template #describe>
                <view class="order-sku u-ellipsis-1" @click.stop="click(g.goods.id)">
                  <text
                      class="order-num">{{ g.sku_price && g.sku_price.goods_sku_text ? g.sku_price.goods_sku_text : '' }}</text>
                </view>
              </template>
              <template #cardBottom>
                <view class="order-price-box u-flex u-row-between">
                  <text class="order-price font-OPPOSANS">会员价￥{{ g.sku_price ? g.sku_price.vip_price : 0 }}</text>
                  <text class="order-price font-OPPOSANS order-yuanjia" v-if="!isVip">￥{{ g.sku_price ? g.sku_price.price : 0 }}</text>
                  <u-number-box :value="g.goods_num" :long-press="false" :min="0" :step="1"
                                :index="index" :max="g.sku_price ? g.sku_price.stock : 0" :disabled-input="false"
                                @minus="onMin($event, g,index)" @plus="changeNum($event, g)" @change="changeNum($event, g)"></u-number-box>
                </view>
              </template>
            </shopro-mini-card>
          </view>
        </view>
      </u-checkbox-group>

      <!-- 数据为空 -->
      <shopro-empty v-if="isEmpty" image="https://duomi.bigchun.com/images/Group2412.png" tipText="当前暂无内容">
      </shopro-empty>
    </view>
    <!-- 底部按钮 -->
    <view class="foot_box " v-show="!isEmpty">
      <view class="tools-box u-flex" v-if="!isshowTool">
        <view class="u-flex u-row-between width-100">
          <view class="price font-OPPOSANS" style="display: flex;align-items: center" v-show="!isTool">
            <view class="price_zong" >
              <!-- <text v-if="isVip == 1 || chooseVal">￥{{ orderPre.total_vip_fee }}</text> -->
              <text> ￥{{ totalCount.totalPrice.toFixed(2) }}</text>
              <!-- ￥{{ protocol_youhuiquan? orderPre.total_fee-orderPre.youhuiquan_money :orderPre.total_fee }} -->
            </view>
            <view class="youhui">
              <text class="youhuititle">优惠{{ youhuimoney }}</text>
<!--              <u-icon name="arrow-up" color="#FE811C"></u-icon>-->
            </view>
          </view>
          <button class="u-reset-button  pay-btn" :class="!isSel?'disableds':''" :disabled="!isSel"
                  v-show="!isTool" @tap="onPay">结算</button>
        </view>
      </view>
      <view class="tools-box u-flex" v-else>
        <view class="u-flex width-100">
          <button class="u-reset-button u-outline-button" @tap="onfocus">移入收藏</button>
          <button class="u-reset-button  pay-btn" @tap="goodsDelete()">删除</button>
        </view>
      </view>
    </view>
    <!-- <shopro-tabbar></shopro-tabbar> -->
  </view>
</template>

<script>
import {
  mapMutations,
  mapActions,
  mapState,
  mapGetters
} from 'vuex';
let timer = null;
export default {
  components: {},
  data() {
    return {
      isTool: false,
      isVip:0,
      isshowTool:false
    };
  },
  computed: {
    ...mapGetters(['totalCount', 'isSel', 'isActivityPay', 'cartList', 'allSelected', 'authType', 'isLogin','youhuimoney']),
    isEmpty() {
      // console.log("========this.cartList", this.cartList)
      return !this.cartList.length;
    },
    youhuimoney(){
      console.log("====this.$",this.$store.state)
      return this.$store.state.cart.youhui_money
    }
  },
  onShow() {
    this.isLogin && this.getCartList();
    console.log("哈哈哈哈哈哈：",this.totalCount)
    console.log("====this.$",this.$store.state.cart.youhui_money)
  },
  onHide() {
    this.isTool = false;
  },
  methods: {
    ...mapActions(['getCartList', 'changeCartList']),
    getVip() {
      this.$https('user.isVip').then(res => {
        if (res.code === 1) {
          this.isVip = res.data;
        }
      })
    },
    choosegoods(e) {
      console.log("=========idssss", e);
      var that = this;
      that.$https('cart.choosedgood', {
        token: uni.getStorageSync("token"),
        id: e.id
      })
          .then(res => {
            if (res.code === 1) {
              if (!res.data.is_get) {
                that.showPrivacy = true;
              }
              this.$store.commit('GETYOUHUI',res.msg)
            }
          });
    },
    // 到达最小值
    onMin(e, g) {
      if (e.value < 1) {
        uni.showModal({
          title: '删除提示',
          confirmColor: '#fc5351',
          content: `是否确认从购物车中删除此商品?`,
          success: (res) => {
            if(res.confirm){
              this.changeCartList({
                ids: [g.id],
                art: 'delete'
              });
            }else{
              let ind = null;
              this.cartList.forEach((item,index)=>{
                if(item.id == g.id){
                  ind = index
                }
              })
              console.log("=======g",ind)
              // e.value = 1;
              this.$forceUpdate()
              // g.goods_num = 1;

            }
          },
        });
      } else {
        this.changeNum(e, g)
      }
    },
    // 更改商品数
    async changeNum(e, g) {
      uni.showLoading({
        mask: true
      });
      e.value > 0 && this.changeCartList({
        ids: [g.id],
        goodsNum: e.value,
        art: 'change'
      });
      uni.hideLoading();
      await this.getCartList();
    },

    // 单选
    checkboxGroupChange(e) {
      this.$store.commit('checkCartList');
    },

    // 路由跳转
    jump(path, parmas) {
      this.$Router.push({
        path: path,
        query: parmas
      });
    },
    click(g) {
      this.$Router.push({
        path: '/pages/goods/new_detail',
        query: {
          id: g
        }
      })
    },
    // 全选
    onAllSel() {
      let that = this;
      that.$store.commit('changeAllSellect'); //按钮切换全选。
      that.$store.commit('getAllSellectCartList', that.allSelected); //列表全选
    },

    // 结算
    onPay() {
      let that = this;
      let {
        cartList
      } = this;
      if (this.isSel) {
        let confirmcartList = [];
        let isActivity = false;
        for (let item of this.cartList) {
          if (item.is_select) {
            if (item.cart_type === 'invalid') {
              this.$u.toast('商品已失效');
              return false;
            }
            if (item.cart_type === 'activity') {
              isActivity = true;
            }
            confirmcartList.push({
              goods_id: item.goods_id,
              sku_price_id: item.sku_price_id,
              goods_price: item.sku_price ? item.sku_price.vip_price : 0,
              goods_num: item.goods_num,
              goods_type: item.goods.goods_type,
              activity_type: item.activity_type || ''
            });
          }
        }
        if (confirmcartList.length > 1 && isActivity) {
          this.$u.toast('活动商品只能单独购买');
          return false;
        }
        that.jump('/pages/order/confirm', {
          goodsList: confirmcartList,
          from: 'cart',
          grouponBuyType:'cart'
        });
      }
    },
    onfocus() {
      var that = this;
      let {
        cartList
      } = this;
      let selectedIdsArray = [];
      cartList.map(item => {
        if (item.is_select) {
          selectedIdsArray.push(item.id);
        }
      });
      if(selectedIdsArray.length==0) {
        that.$u.toast('请选择收藏的商品')
        return
      }
      let goodsId = selectedIdsArray.join(',')
      uni.showModal({
        title: '温馨提示',
        content: '将选中商品移入收藏？',
        success: function(res) {
          if (res.confirm) {
            that.onfocused(goodsId)
          } else if (res.cancel) {
            console.log('用户点击取消');
          }
        }
      });
    },
    onfocused(goodsId) {
      let that = this;
      that.$https('goods.favorite', {
        token: uni.getStorageSync("token"),
        goods_id: goodsId
      }).then(res => {
        if (res.code === 1) {
          that.$u.toast(res.msg);
        }
      });
    },
    // 删除
    goodsDelete() {
      var that = this;
      let {
        cartList
      } = this;
      let selectedIdsArray = [];
      cartList.map(item => {
        if (item.is_select) {
          selectedIdsArray.push(item.id);
        }
      });
      if(selectedIdsArray.length==0){
        that.$u.toast('请选择删除的商品')
        return
      }
      uni.showModal({
        title: '温馨提示',
        content: '清空购物车中选中的商品？',
        success: function(res) {
          if (res.confirm) {
            that.goodsDeletes(selectedIdsArray)
          } else if (res.cancel) {
            console.log('用户点击取消');
          }
        }
      });
    },
    goodsDeletes(selectedIdsArray) {
      let that = this;
      that.changeCartList({
        ids: selectedIdsArray,
        art: 'delete'
      });
    }
  }
};
</script>

<style lang="scss">
.content_box {
  border: 0.1rpx solid transparent;
  margin-bottom: 110rpx;
}

// 总计商品
.head_box {
  .tool-box {
    height: 90rpx;
    padding: 0 30rpx;
    background: #f7f5f6;

    .count-box {
      font-size: 26rpx;
      color: #999;

      .all-num {
        color: #a8700d;
      }
    }

    .set-btn {
      background: none;
      font-size: 26rpx;
      color: #999;
    }

    .right-del {
      font-size: 26rpx;
      color: #999;
    }
  }
}

// 空白页
.empty-box {
  flex: 1;
  width: 100%;
  height: 100%;
}

// 购物车项
.collect-list {
  background: #fff;
  width: 750rpx;
  margin-bottom: 20rpx;
  padding: 20rpx 10rpx;

  // 商品卡片包裹
  .goods-wrap {
    position: relative;

    .order-sku {
      font-size: 24rpx;
      font-weight: 400;
      color: rgba(153, 153, 153, 1);
      width: 440rpx;
      margin-bottom: 20rpx;

      .order-num {
        margin-right: 10rpx;
      }
    }

    .order-price-box {
      .status-btn {
        height: 32rpx;
        border: 1rpx solid rgba(207, 169, 114, 1);
        border-radius: 15rpx;
        font-size: 20rpx;
        font-weight: 400;
        color: rgba(168, 112, 13, 1);
        padding: 0 10rpx;
        margin-left: 20rpx;
        background: rgba(233, 183, 102, 0.16);
      }

      .order-price {
        font-size: 26rpx;
        font-weight: 600;
        color: #ff0000;
      }
      .order-yuanjia{
        color: #999999;
        text-decoration: line-through;
        font-size: 24rpx;
        font-weight: 400;
      }
    }

    .lose-box {
      position: absolute;
      z-index: 10;
      width: 100%;
      height: 100%;
      background-color: rgba(#fff, 0.8);

      .icon-yishixiao {
        position: absolute;
        bottom: 0rpx;
        right: 80rpx;
        font-size: 140rpx;
        line-height: 140rpx;
        color: #dbdbdb;
        transform: rotate(-30deg);
      }

      .invalid-tips {
        position: absolute;
        top: 0;
        right: 0;
        left: 0;
        bottom: 0;
        margin: auto;
        width: 400rpx;
        height: 60rpx;
        border-radius: 30rpx;
        color: #fff;
        background-color: rgba(#000, 0.35);
      }
    }
  }

  .tag-box {
    .tag1 {
      line-height: 36rpx;
      padding: 0 8rpx;
      font-size: 18rpx;
      color: rgba(#fff, 0.9);
      background: #f39800;
      display: inline-block;
      box-sizing: border-box;
    }

    .tag2 {
      line-height: 34rpx;
      padding: 0 8rpx;
      font-size: 18rpx;
      color: rgba(#f39800, 0.9);
      background: #fff;
      border-top: 1rpx solid #f39800;
      border-right: 1rpx solid #f39800;
      border-bottom: 1rpx solid #f39800;
      display: inline-block;
      box-sizing: border-box;
    }
  }

  .goods-radio {
    transform: scale(0.7);
    margin-right: 20rpx;
    // background:  #E9B564;
  }

  .price-box {
    width: 420rpx;

    .price {
      color: #e1212b;
    }
  }
}

.tools-box {
  height: 100rpx;
  width: 100%;
  padding: 0 20rpx;
  background: #fff;

  .width-100 {
    width: 100%;
  }

  .check-all {
    font-size: 26rpx;

    .check-all-radio {
      transform: scale(0.7);
      color: #e9b564;
    }
  }

  .price {
    color: #ff0000;
    font-size: 500;
    margin-right: 30rpx;
    .youhui {
      margin-left: 20rpx;
      font-size: 20rpx;
      color: #FE811C;

      .youhui_money {
        color: #FE811C;
      }
    }
  }

  .pay-btn {
    width: 200rpx;
    line-height: 70rpx;
    background: #FD8E8A linear-gradient(180deg, #FC5351 0%, #FF6E6D 100%);
    //box-shadow: 0px 7rpx 6rpx 0px rgba(229, 138, 0, 0.22);
    border-radius: 35rpx;
    padding: 0;
    color: rgba(#fff, 0.9);
    margin: 0;
  }
.u-outline-button{
  width: 200rpx;
  line-height: 70rpx;
  background: transparent;
  border: 2rpx solid #FD8E8A;
  margin-right: 20rpx;
  border-radius: 35rpx;
  padding: 0;
  color: #FD8E8A;
}
  .disableds {
    background: #ececec linear-gradient(180deg, #f8f7f7 0%, #cdcdcd 100%);
  }

  .del-btn {
    width: 200rpx;
    line-height: 70rpx;
    background: linear-gradient(90deg, rgba(244, 71, 57, 1) 0%, rgba(255, 102, 0, 1) 100%);
    border-radius: 35rpx;
    padding: 0;
    color: rgba(#fff, 0.9);
  }
}

.chooseed {
  font-size: 20rpx;
  color: #999;
}

//底部
.foot_box {
  position: fixed;
  bottom: 0;
  width: 100%;
  z-index: 10111;
}

//计数器样式
/deep/.u-numberbox {
  border: 1rpx solid #D9D9D9;
  border-radius: 26rpx;
  overflow: hidden;
}

/deep/.u-number-input {
  margin: 0 0;
  border: 1rpx solid #D9D9D9;
  border-top: none;
  border-bottom: none;
  background: #ffffff !important;
}

/deep/.u-icon-plus {
  background: #ffffff !important;
}

/deep/.u-icon-minus {
  background: #ffffff !important;
}
</style>
